<?php
$this->template->add_admin_css_lib('layout.css');
$this->template->add_admin_css_lib('jquery.gritter.css');
$this->template->add_admin_css_lib('menu_manage.css');
$this->template->add_admin_js_lib('jquery.gritter.min.js');

$this->template->add_admin_js_lib("jquery.nestable.js");
function print_menu($menu) {
	echo '<li class="dd-item" data-id="'.$menu->men_id.'" data-type="'.$menu->men_type.'" data-value="'.$menu->men_value.'">'
			.'<div class="dd-handle">'.$menu->men_name.' </div><i class="dd-remove glyphicon glyphicon-remove"></i><i class="dd-edit glyphicon glyphicon-pencil"></i>';
	if (!empty($menu->child)) {
		echo '<ol class="dd-list">';
		foreach ($menu->child as $item) print_menu($item);
		echo '</ol>';
	}
	echo '</li>';
}
?>

<div class="container-fluid">

<div class="col-12 col-sm-6">
	<form method="post" action="<?php echo $this->url_index . @$menu->{$this->_model->primaryKey}; ?>"  enctype="multipart/form-data" class="form-horizontal">
	<div class="widget-box">
		<div class="widget-title">
			<span class="icon">
				<i class="glyphicon glyphicon-list-alt"></i>
			</span>	
			<h5>Chọn menu cha</h5>
		</div>
		
		<div class="widget-content nopadding">
			
			<?php echo $this->atheme->group_select2('menu','Chọn menu để sửa','','', $parents,@$menu_id,' '); ?>	
			<div class="form-actions">
				<button type="submit" class="btn btn-primary btn-small">
					Select
				</button> 
				or 
				<a class="text-danger" href="<?php echo $this->url_index;?>">Cancel</a>
			</div>
			
			
		</div>
	</div>
	</form> <!-- end of select menu form -->
</div>
<?php if (@$menu_id)  { ?>
<form method="post" action="<?php echo $this->url_edit . @$menu->{$this->_model->primaryKey}; ?>"  enctype="multipart/form-data" class="form-horizontal" onsubmit="return false;">

<div class="col-12 col-sm-6">
	
	<div class="widget-box">
		<div class="widget-title">
			<span class="icon">
				<i class="glyphicon glyphicon-list-alt"></i>
			</span>	
			<ul class="nav nav-tabs " id="menu_change_or_new" data-task="change">
				<li class="active"><a data-toggle="tab" href="#menuchange" data-task="change">Chỉnh sửa</a></li>
				<li class=""><a data-toggle="tab" href="#menuaddnew"  data-task="add">Thêm mới</a></li>
			</ul>
			
		</div>
		<div class="widget-content nopadding">
			
			<?php echo $this->atheme->group_input2('edit[men_name]', 'Tên menu', 'cur_men_name', 'span6 ', @$edit->men_name, 'text', ''); ?>
			
			<?php if (@$edit->men_parent > 0)echo $this->atheme->group_select2('edit[men_type]','Loại menu','','', $this->_model->type,@$edit->men_type,''); ?>
			<input type="hidden" id="cur_men_id" value="<?php echo $edit->men_id; ?>" />
	
			<?php echo $this->atheme->group_select2('edit[men_status]','Trạng thái','cur_men_status','', array('1'=>'Sử dụng','0'=>'Ẩn'),@$edit->men_status); ?>
			
			<div class="form-actions">
				<button type="submit" class="btn btn-primary btn-small" id="change_menu">
					<?php echo ((@$edit->{$this->_model->primaryKey} > 0)?'Save':'Add');?>
				</button> 
				or 
				<a class="text-danger" href="<?php echo $this->url_index;?>">Cancel</a>
			</div>
		</div>
	</div>
		
</div>

<div class="col-12 col-sm-6">
	
	<div class="accordion-group widget-box">
		<div class="accordion-heading">
			<div class="widget-title">
				<a data-parent="#collapse-group" href="#collapseGTwo" data-toggle="collapse">
					<span class="icon"><i class="glyphicon glyphicon-magnet"></i></span><h5>Liên kết</h5>
				</a>
			</div>
		</div>
		<div class="collapse accordion-body" id="collapseGTwo">
			<div class="widget-content">
			<input type="hidden" id="url_task" value=""/>
			<?php echo $this->atheme->group_input2('_link', 'Đường dẫn liên kết', '_link', 'span6 ', @$edit->cat_name, 'text', ' placeholder="http://"'); ?>
			<?php echo $this->atheme->group_input2('_linkname', 'Tên liên kết', '_linkname', 'span6 ', @$edit->cat_name, 'text', ''); ?>
			
			<div class="form-actions">
				<button type="button" class="btn btn-primary btn-small " id="add_url">
					Lưu
				</button> 
			</div>
			</div>
		</div>
	</div>
	
	<div class="accordion-group widget-box">
		<div class="accordion-heading">
			<div class="widget-title">
				<a data-parent="#collapse-group" href="#collapseCate" data-toggle="collapse">
					<span class="icon"><i class="glyphicon glyphicon-magnet"></i></span><h5>Danh mục</h5>
				</a>
			</div>
		</div>
		<div class="collapse accordion-body" id="collapseCate">
			<div class="widget-content">
			<input type="hidden" id="cate_task" value=""/>
			<?php echo $this->atheme->group_select2('cate','Danh mục','cate','cate', $cates,0); ?>
			<?php echo $this->atheme->group_input2('catetitle', 'Tên liên kết', 'catetitle', 'span6 ', @$edit->cat_name, 'text', ''); ?>
			
			<div class="form-actions">
				<button type="button" class="btn btn-primary btn-small " id="add_cate">
					Lưu
				</button> 
			</div>
			</div>
		</div>
	</div>
	
	
</div>


<div class="col-12 col-sm-6"">
	
	<div class="widget-box">
		<div class="widget-title">
			<span class="icon">
				<i class="glyphicon glyphicon-list-alt"></i>
			</span>	
			<h5>Thành phần</h5>
		</div>
		<div class="widget-content nopadding">
			<div class="cf nestable-lists">
				<div class="dd" id="nestable">
					<ol class="dd-list">
					<?php
					
						if (isset($menu_tree) && $menu_tree) foreach ($menu_tree as $menu) print_menu($menu);
					?>
					</ol>
				</div>
				<textarea id="nestable-output" style="display: none;"></textarea>
			</div>
			<div class="form-actions">
				<button type="submit" class="btn btn-primary btn-small" id="saveorder">
					<?php echo ((@$edit->{$this->_model->primaryKey} > 0)?'Save':'Add');?>
				</button> 
				or 
				<a class="text-danger" href="<?php echo $this->url_index;?>">Cancel</a>
			</div>
			
		</div>
	</div>
		
</div>
</form> <!-- end of edit form -->
<?php 
} //end of if has $menu
 ?>


</div>
<script>
	var group = $("ul.serialization").sortable({
		group: 'serialization',
		//delay: 500,
		onDrop: function (item, container, _super) {
			 var data = group.sortable("serialize").get();
			 var jsonString = JSON.stringify(data, null, ' ');
			// console.log(data);
			// $('#serialize_output2').text(jsonString);
			_super(item, container)
		}
	});
</script>


<script type="text/javascript">
$(function (){
	$('#add_url').click(function (){
		system_update_notif();
		var link = $('#_link').val();
		var name = $('#_linkname').val();
		var url_add_menu  = '<?php echo admin_url(); ?>menu/add_url/<?php echo @$menu_id;?>';
		if ($('li[data-id='+$('#url_task').val()+']').size() > 0) {
			//ton tai
			$('li[data-id='+$('#url_task').val()+']').find('.dd-handle').text(name);
			$('li[data-id='+$('#url_task').val()+']').attr('data-value', link);
		}
		
		$.post (url_add_menu, {
			'men_name': name,
			'men_type': 'url',
			'men_parent': <?php echo @$menu_id; ?>,
			'men_link': link,
			'men_id': $('#url_task').val(),
		}, function (re){
			console.log(re);
			try {
				var id = parseInt(re);
				if ($('li[data-id='+id+']').size() > 0) {
					//ton tai
					
				}else {
					$('#nestable > ol').append('<li class="dd-item" data-id="'+id+'" data-type="url"><div class="dd-handle">'+name+' </div><i class="dd-remove glyphicon glyphicon-remove"></i><i class="dd-edit glyphicon glyphicon-pencil"></i></li>');
				}
			 $('#_link').val('');
			 $('#_linkname').val('');
			 $('#url_task').val('');
			}catch (e) {
				alert("Không thể thêm danh mục");
			}
			$.gritter.removeAll();
		})
	});
	$('#cate').change(function (){
		$('#catetitle').val($(this).find('option:selected').text().replace(/^([\s-]+)/, ''));
	});
	$('#add_cate').click(function (){
		system_update_notif();
		var link = $('#cate').val();
		var name = $('#catetitle').val();
		var url_add_menu  = '<?php echo admin_url(); ?>menu/add_url/<?php echo @$menu_id;?>';
		if ($('li[data-id='+$('#cate_task').val()+']').size() > 0) {
			//ton tai
			$('li[data-id='+$('#cate_task').val()+']').find('.dd-handle').text(name);
			$('li[data-id='+$('#cate_task').val()+']').attr('data-value', link);
		}
		$.post (url_add_menu, {
			'men_name': name,
			'men_type': 'cat',
			'men_parent': <?php echo @$menu_id; ?>,
			'men_link': link,
			'men_id': $('#cate_task').val(),
		}, function (re){
			console.log(re);
			$('#cate_task').val('');
			try {
				var id = parseInt(re);
				$('#nestable > ol').append('<li class="dd-item" data-id="'+id+'" data-type="url"><div class="dd-handle">'+name+' </div><i class="dd-remove glyphicon glyphicon-remove"></i></li>');
			 $('#_link').val('');
			 $('#_linkname').val('');
			}catch (e) {
				alert("Không thể thêm danh mục");
			}
			$.gritter.removeAll();
		})
	});
});
</script>
<script>
	var group = $("ul.serialization").sortable({
		group: 'serialization',
		//delay: 500,
		onDrop: function (item, container, _super) {
			 var data = group.sortable("serialize").get();
			
			 var jsonString = JSON.stringify(data, null, ' ');
			console.log(data);
		//	$('#serialize_output2').text(jsonString);
			_super(item, container)
		}
	});
</script>


<script type="text/javascript">
var system_update_notif= function (){
	$.gritter.add({
		title : 'Cập nhật dữ liệu',
		text : 'Hệ thống đang cập nhật, vui lòng đợi trong giây lát',
		image : 'http://localhost/gamehaynhat.com/template/admin/img/imgLoading.gif',
		sticky : true
	});
}
$(document).ready(function()
{
    var updateOutput=function(e)
	{var list=e.length?e:$(e.target),output=list.data('output');if(!output){return false;}
	if(window.JSON){output.val(window.JSON.stringify(list.nestable('serialize')));}else{output.val('JSON browser support required for this demo.');}};if($('#nestable').size()>0)$('#nestable').nestable({group:1}).on('change',updateOutput);$('#nestable2').nestable({group:1}).on('change',updateOutput);updateOutput($('#nestable').data('output',$('#nestable-output')));$('#nestable-menu').on('click',function(e)
	{var target=$(e.target),action=target.data('action');if(action==='expand-all'){$('.dd').nestable('expandAll');}
	if(action==='collapse-all'){$('.dd').nestable('collapseAll');}});$('#nestable3').nestable();
	
	$('#saveorder').click(function(){
		system_update_notif();
		$.post('<?php echo admin_url(); ?>menu/save_order/<?php echo @$menu_id;?>', {
			json: $('#nestable-output').val()
		}, function (re){
			// console.log(re);
			$.gritter.removeAll();
		});
		return false;
	});
	$(document.body).on('click', 'i.dd-remove', function (){
		system_update_notif();
		var id = $(this).parent().attr('data-id');
		$(this).parent().remove();
		$.post('<?php echo admin_url(); ?>menu/del_child/'+id, {}, function (re){
			// console.log(re);
			$.gritter.removeAll();
		});
		return false;
	});
	$(document.body).on('click', 'i.dd-edit', function (){
		var p = $(this).parent();
		var value = $(p).attr('data-value');
		var a_target=  '';
		var id = $(p).attr('data-id');
		if ($(p).attr('data-type') == 'cat') {
			$('#cate').find('option').removeAttr('selected');
			$('#cate').find('option[value='+value+']').attr('selected', 'selected');
			
			$('#cate_task').val(id);
			$('#catetitle').val($(this).siblings('.dd-handle').text());
			
			$('#cate').select2();
			a_target = 'collapseCate';
		}else {
			$('#url_task').val(id);
			$('#_linkname').val($(this).siblings('.dd-handle').text());
			$('#_link').val(value);
			a_target = 'collapseGTwo';
			
		}
		$('html,body').animate({scrollTop: $('[href="#'+a_target+'"]').offset().top}, 500);
		$('[href="#'+a_target+'"]').parents('.accordion-group').find('.accordion-body').slideDown('slow');
		$('[href="#'+a_target+'"]').parents('.accordion-group').find('.accordion-body').addClass('in');
		
		$('[href="#'+a_target+'"]').parents('.accordion-group').find('.accordion-body').removeClass('collapsed');
		// console.log(this);
		// $.post('<?php echo admin_url(); ?>menu/del_child/'+id, {}, function (re){
			// console.log(re);
		// });
		return false;
	});
	
	$('#change_menu').click(function(){
		system_update_notif();
		var url_add_menu  = '<?php echo admin_url(); ?>menu/add_url/<?php echo @$menu_id;?>';
		var name = $('#cur_men_name').val();
		var status = $('#cur_men_status').val();
		var id = '';
		if ($('#menu_change_or_new').attr('data-task') == 'change') {
			id = $('#cur_men_id').val();
		}
		$.post(url_add_menu, {
			'men_name': name,
			'men_type': 'cat',
			'men_status': status,
			'men_id': id,
		}, function (re){
			console.log(re);
			$.gritter.removeAll();
		});
	});
	
	$('#menu_change_or_new a ').click(function(){
		$('#menu_change_or_new').attr('data-task', $(this).attr('data-task'));
	});
});
</script>



<style type="text/css">
</style>